Добавления водяных знаков на изображения

<p>Добрый день.
Нужен скрипт на js для добавления водяных знаков на картинки всех форматов (png, jpg, webp и тд).
Вот пример функционала, там только работа с PDF, нужен функционал такой, можно за основу другой брать:
https://www.ilovepdf.com/pdf_add_watermark

Как должно работать:
Все тексты на английском
1. Открываем итоговый html файл в браузере в нем только инпут для выбора файла. 
2. Далее:
- загружаем картинку, она отображается как превью (должна отображаться на превью полностью не зависимо от размера!)
3. Далее ПОД превью  появляется блок с настройками водяного знака с двумя вкладками для добавления водяного знака в виде <b>текста </b>и <b>картинки</b>, с аналогичным функционалом.
Полей Pages и Layer не будет (это для пдф).

Единственное отличие - вместо точек на превью хорошо бы видеть реальный текст или картинку, как в итоговом варианте будет добавлено.
4. Все должно быть адаптивным и не плыть при уменьшении страницы.

Предпочтение отдается лучшей цене, проект не большой без размещений на серверах, баз данных и тд.</p><p>
Результат:
Архив с файлом html, css и нужные js файлы, можно подключать библиотеки, но они должны быть 1 файлом и входить в итоговый архив. Работать все должно без интернета, автономно.</p>